import { NavBar,} from 'antd-mobile'
import {useNavigate} from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { recharge,buy,weixinRecharge as welkinRecharge,MoneyState} from '../../../store/money'  //引入reducer方法



const Mine = ()=>{
const navigate = useNavigate()

const dispatch = useDispatch() //获取到发送的方法
const state = useSelector((reducer :MoneyState)=>reducer.money) //获取到状态

const addMoney = ()=>{
    dispatch(recharge(100))
}
const subMoney = ()=>{
    dispatch(buy(200))
}
const addMoneyByWeiXin = ()=>{
    dispatch(welkinRecharge(200))
}
const back = () =>{
    navigate(-1)
}

    return(<>
    {/* 导航栏 */}
         <div style={{borderBottom:'1px solid #eee'}}>
         <NavBar style={{color:'#fff', backgroundColor:'#108ee9'}} back='返回' onBack={back}>我的</NavBar>
         </div>

         <div>我有{state.money}块钱</div>
         <button onClick={addMoney}>赚钱</button>
         <button onClick={addMoneyByWeiXin}>微信赚钱（需要三秒钟才能到账嗷）</button>
         <button onClick={subMoney}>花钱</button>
            
    <div>我的</div>
    </>)
}

export default Mine